<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车——PC端</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../ele-2.15.7/index.js"></script>
</head>

<body>
    <div class="wrap clearfix" id="app">

        <el-container>
            <el-header>

            </el-header>
            <el-main>
                <div class="location">当前位置：首页<span></span><b class="red">购物车</b></div>
                <el-table :header-cell-style="{'text-align':'center'}"
                          :cell-style="{'text-align':'center'}"
                          stripe
                          class="title"
                          :data="tableData.data"
                          @selection-change="handleSelectionChange">

                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column prop="image" label="图片">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="'../' + scope.row.image"
                                    fit="contiain">
                            </el-image>
                        </template>
                    </el-table-column>

                    <el-table-column prop="proname" label="商品名称"></el-table-column>

                    <el-table-column prop="price" label="商品价格">
                        <template slot-scope="scope">
                            <span>{{scope.row.price}}元</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="num" label="数量">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.num" @change="handleChange(scope.row)" :min="1" label="描述文字" size="small"></el-input-number>
                        </template>
                    </el-table-column>

                    <el-table-column prop="price" label="价格">
                        <template slot-scope="scope">
                            <span>{{scope.row.price*scope.row.num}}元</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="remove(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <template >
                    <el-button
                            size="medium"
                            type="danger"
                            @click="create">购买
                    </el-button>
                </template>
            </el-footer>
        </el-container>

        <el-dialog title="付款界面" :visible.sync="dialogFormVisible"  :close-on-click-modal = "false">
            <div style="display: flex; justify-content: space-around;" >
                <el-form>
                    <el-form-item label="总金额" :label-width="formLabelWidth">
                        <el-input
                                v-model="amount">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="支付方式" :label-width="formLabelWidth">
                        <template>
                            <el-select v-model="paymenttype" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button @click="saveOrder" type="danger">付 款</el-button>
            </div>

        </el-dialog>

    </div>    

    <!-- 引入JS文件 -->
    <script src="js/main.js"></script>
</body>
</html>

<script>
    var vue = new Vue({
        el: "#app",
        data:{
            dialogFormVisible: false,
            formLabelWidth: "100px",
            amount: "",
            tableData: {},
            name: "",
            uid: "",
            price : "",
            paymenttype: "微信支付",
            multipleSelection: [],
            options: [{
                value: '微信支付',
                label: '微信支付'
            }, {
                value: '支付宝支付',
                label: '支付宝支付'
            }],
        },
        created(){
            this.getUid();
            this.query();
            this.count();
        },
        methods: {
            getUid(){
                //对获取的url进行解码
                var url  = decodeURI(location.search);
                let arr = [];// 存储参数的数组
                let res = {};// 存储最终JSON结果对象
                arr = url.split("?")[1].split("&");//获取地址栏的参数
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].indexOf("=")!=-1){
                        let str = arr[i].split("=");
                        res[str[0]] = str[1];
                    }else{//参数中无值
                        res[arr[i]]="";
                    }
                }
                this.uid = res.uid;
            }
            ,
            create(){
                this.dialogFormVisible = true;
            },
            handleSelect(item) {
                console.log(item);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleChange(data) {

            },
            query() {
                axios.get("../QueryCardServlet.s", {
                    params: {
                        name: this.name,
                        uid: this.uid,
                    }
                }).then(res => {
                    this.tableData = res.data;
                })
            },
            count(){
                let sum = 0;
                for (let map in this.multipleSelection) {
                    console.info(map);
                    sum += (parseInt(this.multipleSelection[map].price) * parseInt(this.multipleSelection[map].num));
                }
                this.amount = sum;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.count();
            },
            // 添加
            async saveOrder(){
                // 构建post参数
                for (let map in this.multipleSelection) {
                    // console.info(map);
                    // console.info(this.multipleSelection);
                    var params = new URLSearchParams();
                    for (let name in this.multipleSelection[map]){
                        params.append(name, this.multipleSelection[map][name]);
                    }
                    params.append("uid", this.uid);
                    params.append("paymenttype",this.paymenttype);
                    params.append("status","20");
                    // 发送 ajax post 请求
                    await axios.post("../SaveCardServlet.s", params).then(res=>{
                        if (res.data.code == 1){
                                this.$message(res.data.msg);
                                this.removeBuyShopping(params);
                        } else{
                            this.$alert(res.data.msg);
                        }
                    });
                }
                this.dialogFormVisible = false; // 关闭弹窗
                this.query(); // 刷新表格
            },

            removeBuyShopping(data){
                    axios.get("../RemoveCardServlet.s", {
                        params: {
                            carid : data.get("carid"),
                        }

                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.data.msg,
                        });
                        this.query();
                    })
            },
            // 物理删除
            remove(data) {
                this.$confirm('确定删除该商品, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("../RemoveCardServlet.s", {
                        params: {
                            carid: data.carid,
                        }
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.data.msg,
                        });
                        this.query();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: "已取消删除!"
                    });
                });
            },
        }
    })
</script>
